<template>
  <image v-if="/^http/.test(name)" :src="name" class="icon--img" :style="[styles]" :class="[{ 'icon--flex': flex }]" />
  <view
    v-else
    class="icon--font"
    :style="[styles]"
    :class="[
      iconName,
      {
        'icon--loading': name === 'loading',
        'icon--Q': name === 'Q',
        'icon--A': name === 'A',
        'icon--disabled': disabled,
        'icon--gradient': isGradient,
      },
    ]"
    @click="handleClick"
  >
    {{ getHtml }}
  </view>
</template>

<script lang="ts">
import { defineComponent, computed, PropType, ref } from '@vue/composition-api'
import settings from '@/settings'
import addUnit from '@/utils/add-unit'
import addColor from '@/utils/add-color'

interface IProps {
  name: string
  size: string | number
  color: string
  marginLeft: string | number
  marginRight: string | number
  disabled: boolean
  padding: string
}

export default defineComponent({
  name: 'IconFont',
  props: {
    name: {
      type: String as PropType<string>,
      default: '',
    },
    size: {
      type: [String, Number] as PropType<string | number>,
      default: '',
    },
    color: {
      type: String,
      default: '#ccc',
    },
    marginLeft: {
      type: [String, Number],
      default: '',
    },
    marginRight: {
      type: [String, Number],
      default: '',
    },
    padding: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    flex: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['click'],
  setup(props: IProps, { emit }) {
    const getColor = () => {
      if (props.name === 'add-cart') {
        return `-webkit-linear-gradient(45deg, #FF0000, #248DFA 80%)`
      }

      if (/^\$\-\-/.test(props.color)) {
        return settings.css[props.color.slice(1)]
      }

      return props.color
    }
    const color = getColor()
    const isGradient = ref(/gradient/.test(color))
    const getIconName = () => {
      if (props.name === 'loading') {
        return ''
      }

      if (props.name === 'Q') {
        return 'Q'
      }

      if (props.name === 'A') {
        return 'A'
      }

      return props.name === 'add-cart' ? 'mask-cart' : props.name
    }
    const iconName = computed(() => {
      const name = getIconName()

      return name.startsWith('icon-') ? name : 'icon-' + name
    })

    const styles = computed(() => {
      const color = addColor(getColor())
      const fontSize = addUnit(props.size)
      const height = addUnit(props.size)
      const width = addUnit(props.size)
      const obj: any = {}

      if (props.marginLeft) {
        obj.marginLeft = addUnit(props.marginLeft)
      }

      if (props.marginRight) {
        obj.marginRight = addUnit(props.marginRight)
      }

      if (props.padding) {
        obj.padding = props.padding
      }

      if (/^http/.test(props.name) || props.name === 'loading') {
        obj.height = height
        obj.width = width
      }

      return { ...obj, fontSize, '--font-color': color }
    })

    const getHtml = computed(() => {
      if (props.name === 'Q') {
        return 'Q'
      }

      if (props.name === 'A') {
        return 'A'
      }

      return ''
    })

    const handleClick = (e) => {
      if (props.disabled) {
        return false
      }
      emit('click', e)
    }
    return {
      iconName,
      styles,
      handleClick,
      isGradient,
      getHtml,
    }
  },
})
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont'; /* Project id 2679825 */
  src: url('https://at.alicdn.com/t/font_2679825_5a5u80pcok3.woff2?t=1641956823413') format('woff2'),
    url('https://at.alicdn.com/t/font_2679825_5a5u80pcok3.woff?t=1641956823413') format('woff'),
    url('https://at.alicdn.com/t/font_2679825_5a5u80pcok3.ttf?t=1641956823413') format('truetype');
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-query:before {
  content: '\e6c1';
}

.icon-footmark:before {
  content: '\e6bf';
}

.icon-Collection:before {
  content: '\e6c0';
}

.icon-register:before {
  content: '\e6bd';
}

.icon-commission:before {
  content: '\e6be';
}

.icon-retail:before {
  content: '\e670';
}

.icon-pull-up:before {
  content: '\e6bc';
}

.icon-drop-down:before {
  content: '\e6bb';
}

.icon-top:before {
  content: '\e663';
}

.icon-horn:before {
  content: '\e6ba';
}

.icon-package:before {
  content: '\e6b9';
}

.icon-log:before {
  content: '\e6b8';
}

.icon-nav:before {
  content: '\e6b7';
}

.icon-rider:before {
  content: '\e6b6';
}

.icon-collage:before {
  content: '\e6b5';
}

.icon-head:before {
  content: '\e6b4';
}

.icon-who:before {
  content: '\e6b3';
}

.icon-mall:before {
  content: '\e6b2';
}

.icon-circle-sucess:before {
  content: '\e6b1';
}

.icon-loading:before {
  content: '\e6b0';
}

.icon-time:before {
  content: '\e6af';
}

.icon-smile-cancel:before {
  content: '\e6ae';
}

.icon-report:before {
  content: '\e6ad';
}

.icon-ligntning:before {
  content: '\e6ac';
}

.icon-a-addcart:before {
  content: '\e6ab';
}

.icon-circle-close:before {
  content: '\e6aa';
}

.icon-a-smile2:before {
  content: '\e6a9';
}

.icon-mask-minus:before {
  content: '\e6a8';
}

.icon-circle-plus:before {
  content: '\e6a7';
}

.icon-circle-fabulous:before {
  content: '\e69b';
}

.icon-fill-fabulous:before {
  content: '\e6a6';
}

.icon-circlewide-fabulous:before {
  content: '\e6a5';
}

.icon-search:before {
  content: '\e6a4';
}

.icon-alarm-clock:before {
  content: '\e654';
}

.icon-back:before {
  content: '\e655';
}

.icon-address-list:before {
  content: '\e656';
}

.icon-ask:before {
  content: '\e657';
}

.icon-bell:before {
  content: '\e658';
}

.icon-bargaining:before {
  content: '\e659';
}

.icon-cancellation:before {
  content: '\e65a';
}

.icon-cart:before {
  content: '\e65b';
}

.icon-category-list:before {
  content: '\e65c';
}

.icon-check-checked:before {
  content: '\e65d';
}

.icon-check-disabled:before {
  content: '\e65e';
}

.icon-category:before {
  content: '\e65f';
}

.icon-check-normal:before {
  content: '\e660';
}

.icon-checked:before {
  content: '\e661';
}

.icon-check:before {
  content: '\e662';
}

.icon-circle-cart:before {
  content: '\e664';
}

.icon-circle-minus:before {
  content: '\e665';
}

.icon-circle-warn:before {
  content: '\e666';
}

.icon-close:before {
  content: '\e667';
}

.icon-code:before {
  content: '\e668';
}

.icon-collected:before {
  content: '\e669';
}

.icon-edit:before {
  content: '\e66a';
}

.icon-coupons:before {
  content: '\e66b';
}

.icon-del:before {
  content: '\e66c';
}

.icon-email:before {
  content: '\e66d';
}

.icon-eye-hidden:before {
  content: '\e66e';
}

.icon-enter:before {
  content: '\e66f';
}

.icon-eye:before {
  content: '\e671';
}

.icon-fillarrow-down:before {
  content: '\e672';
}

.icon-fillarrow-left:before {
  content: '\e673';
}

.icon-fillarrow-right:before {
  content: '\e674';
}

.icon-fillarrow-up:before {
  content: '\e675';
}

.icon-fillhot:before {
  content: '\e676';
}

.icon-fillprice-down:before {
  content: '\e677';
}

.icon-fillstar:before {
  content: '\e678';
}

.icon-funnel:before {
  content: '\e679';
}

.icon-follow:before {
  content: '\e67a';
}

.icon-home:before {
  content: '\e67b';
}

.icon-live:before {
  content: '\e67c';
}

.icon-lock:before {
  content: '\e67d';
}

.icon-followed:before {
  content: '\e67e';
}

.icon-mask-plus:before {
  content: '\e67f';
}

.icon-mask-cart:before {
  content: '\e680';
}

.icon-mask-close:before {
  content: '\e681';
}

.icon-minus:before {
  content: '\e682';
}

.icon-more-horizontal:before {
  content: '\e683';
}

.icon-message:before {
  content: '\e684';
}

.icon-more:before {
  content: '\e685';
}

.icon-order-comment:before {
  content: '\e686';
}

.icon-order-after:before {
  content: '\e687';
}

.icon-order-pay:before {
  content: '\e688';
}

.icon-order-delivery:before {
  content: '\e689';
}

.icon-order-goods:before {
  content: '\e68a';
}

.icon-order:before {
  content: '\e68b';
}

.icon-PC:before {
  content: '\e68c';
}

.icon-phone:before {
  content: '\e68d';
}

.icon-location:before {
  content: '\e68e';
}

.icon-photograph:before {
  content: '\e68f';
}

.icon-plus:before {
  content: '\e690';
}

.icon-pay:before {
  content: '\e691';
}

.icon-price-down:before {
  content: '\e692';
}

.icon-procurement:before {
  content: '\e693';
}

.icon-refresh:before {
  content: '\e694';
}

.icon-purse:before {
  content: '\e695';
}

.icon-scan:before {
  content: '\e696';
}

.icon-security-code:before {
  content: '\e697';
}

.icon-service:before {
  content: '\e698';
}

.icon-shop:before {
  content: '\e699';
}

.icon-share:before {
  content: '\e69a';
}

.icon-sketch:before {
  content: '\e69c';
}

.icon-tellphone:before {
  content: '\e69d';
}

.icon-collect:before {
  content: '\e69e';
}

.icon-comments:before {
  content: '\e69f';
}

.icon-date:before {
  content: '\e6a0';
}

.icon-setup:before {
  content: '\e6a1';
}

.icon-size:before {
  content: '\e6a2';
}

.icon-store:before {
  content: '\e6a3';
}

.icon-arrow-left:before {
  content: '\e650';
}

.icon-arrow-down:before {
  content: '\e64e';
}

.icon-arrow-right:before {
  content: '\e64f';
}

.icon-arrow-up:before {
  content: '\e652';
}
</style>
<style lang="scss" scoped>
.icon--img {
  display: inline-block;
}
.icon--flex {
  display: flex;
}
.icon--font {
  font-family: 'iconfont' !important;
  display: inline-block;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--font-color);
}
.icon--gradient {
  background: var(--font-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
@keyframes loadingCircle {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.icon--loading {
  animation: loadingCircle 1s steps(12) infinite;
  background: transparent
    url()
    no-repeat;
  background-size: 100%;
}
.icon--disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.icon--Q {
  width: 28rpx !important;
  height: 28rpx !important;
  background: linear-gradient(270deg, #248dfa 0%, #ff0000 100%);
  border-radius: 4rpx !important;
  font-size: 20rpx !important;
  text-align: center;
  line-height: 28rpx;
  font-weight: bold;
  --font-color: #fff !important;
  display: block;
}
.icon--A {
  width: 28rpx !important;
  height: 28rpx !important;
  background: linear-gradient(90deg, #fea500 0%, #ffbc00 100%);
  border-radius: 4rpx !important;
  font-size: 20rpx !important;
  text-align: center;
  line-height: 28rpx;
  font-weight: bold;
  display: block;
  --font-color: #fff !important;
}
</style>
